<template>
  <div class="gas-set">
    <div class="dialog">
      <div class="header flex-center">
        <span>添加币种手续费</span>
        <i class="iconfont iconguanbi" @click="$emit('cancel')"></i>
      </div>
      <el-form class="form" label-width="120px" label-position="left">
        <el-form-item label="币种名称">
          <el-input v-model="form.coin_name" placeholder="请输入币种名称"></el-input>
        </el-form-item>
        <el-form-item label="最低手续费">
          <el-input v-model="form.low" placeholder="请输入最低手续费，最多4位小数"></el-input>
        </el-form-item>
        <el-form-item label="最优手续费">
          <el-input v-model="form.average" placeholder="请输入最优手续费，最多4位小数"></el-input>
        </el-form-item>
        <el-form-item label="最高手续费">
          <el-input v-model="form.high" placeholder="请输入最高手续费，最多4位小数"></el-input>
        </el-form-item>
        <div class="flex-center bottom">
          <el-button size="small" type="primary" @click="submit">确定</el-button>
          <el-button size="small" @click="$emit('cancel')">取消</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import {
  gasConfig
} from "../../views/CoinsManage/Coins.service.js";
export default {
  props: ["detail"],
  data() {
    return {
      nameLang: "zh",
      form: {
        coin_name: '',
        low: '',
        average: '',
        high: ''
      },
    };
  },
  watch: {
    'form.low': {
      handler(newVal) {
        let index = newVal.indexOf('.')
        if (index > -1) {
          let n = newVal.substring(0, index + 1)
          let m = newVal.substring(index + 1, newVal.length)
          this.form.low = m.length > 4 ? n + m.substring(0, 4) : n + m
        }
      },
      deep: true
    },
    'form.average': {
      handler(newVal) {
        let index = newVal.indexOf('.')
        if (index > -1) {
          let n = newVal.substring(0, index + 1)
          let m = newVal.substring(index + 1, newVal.length)
          this.form.average = m.length > 4 ? n + m.substring(0, 4) : n + m
        }
      },
      deep: true
    },
    'form.high': {
      handler(newVal) {
        let index = newVal.indexOf('.')
        if (index > -1) {
          let n = newVal.substring(0, index + 1)
          let m = newVal.substring(index + 1, newVal.length)
          this.form.high = m.length > 4 ? n + m.substring(0, 4) : n + m
        }
      },
      deep: true
    }
  },
  mounted() {
    if (this.detail.type === 1) {
      this.form = JSON.parse(JSON.stringify(this.detail.data))
    } else return;
  },
  methods: {
    async submit() {
      const res =
        this.detail.type === 0
          ? await gasConfig('post', this.form)
          : await gasConfig('put', this.form);
      if (res.code === 0) {
        this.$notify.success({
          title: "提示",
          message: this.detail.type === 0 ? "添加成功" : "编辑成功"
        });
        this.$emit("success");
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.gas-set {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba($color: #000000, $alpha: 0.3);
  z-index: 1001;
  .dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    min-width: 500px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    .header {
      margin-bottom: 10px;
      padding: 15px 0;
      span {
        font-weight: 600;
        font-size: 18px;
      }
      i {
        position: absolute;
        right: 10px;
        font-size: 20px;
        cursor: pointer;
        transition: 0.2s;
      }
      i:hover {
        color: #409eff;
      }
    }
  }
  .form {
    padding: 20px 30px;
    .bottom {
      padding-top: 25px;
    }
  }
}
</style>


